<template>
  <div>
    <div class="login-box">
      <div class="owl" ref="owl">
        <div class="hand"></div>
        <div class="hand hand-r"></div>
        <div class="arms">
          <div class="arm"></div>
          <div class="arm arm-r"></div>
        </div>
      </div>
      <div class="input-box">
        <el-form class="login-container"
                 :model="loginForm"
                 :rules="rules"
                 label-position="left"
                 @keydown.enter.native="login"
                 ref="loginForm"
                 label-width="0px"
                 status-icon>
          <h3 class="login_title">登录</h3>
          <el-form-item prop="loginName">
            <el-input type="text" v-model.lazy="loginForm.loginName"
                      auto-complete="off" placeholder="学号" v-focus></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model.lazy="loginForm.password"
                      auto-complete="off" placeholder="密码" @focus="pushEyes" @blur="openEyes"></el-input>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click.stop="login"
                       :loading="loading">登录
            </el-button>
          </el-form-item>
          <el-form-item>没有账号？
            <el-button type="text" style="color:#1a5b59;font-weight:bold" @click.stop="register">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {valiDate} from '../../util/verify/valiDate'
import api from '../../apis/login'
import {Message} from 'element-ui'
import {loginRules} from '../../util/verify/rules'
import {StringToArr} from '../../util/SringToArr'
import _ from 'lodash'

export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      rules: loginRules,
      loginForm: {
        loginName: 'superAdmin',
        password: ''
      },
      responseResult: []
    }
  },
  mounted() {
    // 绑定事件
    window.addEventListener('keydown', this.keydown)
  },
  // 销毁事件
  destroyed() {
    window.removeEventListener('keydown', this.keydown, false)
  },
  directives: {
    // 自定义指令v—focus自动聚焦
    focus: {
      created(el, binding, vnode, prevVnode) {
        // 下面会介绍各个参数的细节
      }
    }
  },
  methods: {
    openEyes() {
      this.$refs['owl'].classList.remove('password')
    },
    pushEyes() {
      this.$refs['owl'].classList.add('password')
    },
    keydown(e) {
      // 如果是回车则执行登录方法
      if (e.keyCode === 13) {
        // 需要执行的登录方法
        this.login()
      }
    },
    login: _.debounce(async function () {
      this.loading = true
      const _this = this
      /* 执行表单验证 */
      const valid = await valiDate(_this, 'loginForm')
      await _this.$refs['loginForm'].validate(valid => {
      })
      if (!valid) {
        return null
      }
      const loginData = {
        'loginName': _this.loginForm.loginName,
        'password': _this.loginForm.password
      }
      /* 请求登录接口 */
      const loginResult = await api.login(loginData)
      if (loginResult.code === 200) {
        console.log(loginResult.data.token)
        await _this.$store.dispatch('login', {token: loginResult.data.token, identity: 1})
        const roles = StringToArr(loginResult.data.roles)
        const adminIdentity = this.isAdmin(roles)
        if (adminIdentity) {
          this.$store.commit('setAdminIdentify')
          await this.$store.dispatch('getRouters')
          await _this.$router.push({path: '/adminIndex'})
        } else {
          await this.$router.push({path: this.$store.state.returnHistory})
          // await _this.$router.push({path: '/index'})
        }
        Message.success(loginResult.msg)
        this.loading = false
      } else {
        this.loading = false
        Message.error(loginResult.msg)
      }
    }, 3000, {
      'leading': true, // options.leading  options.trailing 决定延迟前后如何触发（注：是 先调用后等待 还是 先等待后调用）
      'trailing': false
    }),
    register() {
      this.$emit('status', 'register')
    },
    isAdmin(roles) {
      for (let i = 0; i < roles.length; i++) {
        if (roles[i] === '1') {
          return true
        }
      }
      return false
    }
  }
}
</script>

<style scoped>

* {
  /*!* 初始化 *!*/
  /*margin: 0;*/
  /*padding: 0;*/
}

body {
  /* 100%窗口高度 */
  height: 100vh;
  /* 弹性布局 居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #72afd3, #96fbc4);
  margin: 0;
  padding: 0;
}

.login-box {
  /* 相对定位 */
  position: relative;
  width: 320px;
  margin-top: 100px;
  padding: 0;
}

.input-box {
  /* 弹性布局 垂直排列 */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.input-box input {
  height: 40px;
  border-radius: 3px;
  /* 缩进15像素 */
  text-indent: 15px;
  outline: none;
  border: none;
  margin: 0;
  margin-bottom: 15px;
  padding: 0;
}

.input-box input:focus {
  outline: 1px solid lightseagreen;
  margin: 0;
  padding: 0;
}

.input-box button {
  border: none;
  height: 45px;
  /*background-color: lightseagreen;*/
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

/* 接下来是猫头鹰的样式 */
.owl {
  width: 211px;
  height: 108px;
  /* 背景图片 */
  background: url("../../assets/owl-login.png");
  /* 绝对定位 */
  /*background-color: #96fbc4;*/
  position: absolute;
  top: -100px;
  /* 水平居中 */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
}

.owl .hand {
  width: 34px;
  height: 34px;
  border-radius: 40px;
  background-color: #472d20;
  /* 绝对定位 */
  position: absolute;
  left: 12px;
  bottom: -8px;
  /* 沿Y轴缩放0.6倍（压扁） */
  transform: scaleY(0.6);
  /* 动画过渡 */
  transition: 0.3s ease-out;
  margin: 0;
  padding: 0;
}

.owl .hand.hand-r {
  left: 170px;
  margin: 0;
  padding: 0;
}

.owl.password .hand {
  transform: translateX(42px) translateY(-15px) scale(0.7);
  margin: 0;
  padding: 0;
}

.owl.password .hand.hand-r {
  transform: translateX(-42px) translateY(-15px) scale(0.7);
  margin: 0;
  padding: 0;
}

.owl .arms {
  position: absolute;
  top: 58px;
  width: 100%;
  height: 41px;
  overflow: hidden;
}

.owl .arms .arm {
  width: 40px;
  height: 65px;
  position: absolute;
  left: 20px;
  top: 40px;
  background: url("../../assets/owl-login-arm.png") no-repeat;
  transform: rotate(-20deg);
  transition: 0.3s ease-out;
}

.owl .arms .arm.arm-r {
  transform: rotate(20deg) scaleX(-1);
  left: 158px;
}

.owl.password .arms .arm {
  transform: translateY(-40px) translateX(40px);
}

.owl.password .arms .arm.arm-r {
  transform: translateY(-40px) translateX(-40px) scaleX(-1);
}

.login-container {
  margin: 0px;
}
</style>
